<template>
  <div class="home">
    <el-row
      class="first"
      style="width: auto; padding-top: 10%; padding-bottom: 3%"
    >
      <el-col :span="12" :offset="6"
        ><h1
          style="
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
              Liberation Mono, Courier New, monospace;
            font-weight: 700;
            font-size: 4.5rem;
            line-height: 1;
            color: #a7adbb;
          "
        >
          ChatGpt
        </h1></el-col
      >
    </el-row>
    <el-row class="second" style="width: auto">
      <el-col :span="16" :offset="4">
        <el-input
          @focus="handleInputFocus"
          @blur="handleInputBlur"
          placeholder="请输入文字或点击左侧麦克风按钮进行提问吧~"
          v-model="info"
          clearable
          @keyup.enter="generate()"
        >
          <template #prefix>
            <div id="voice"></div>
            <div class="voice-input-button-wrapper">
              <voice-input-button
                appId="c5d5f287"
                apiKey="7a6d716e393d7eca139540949a397323"
                apiSecret="MTE3MThhMmViY2ZjNDhmZWRlMzkyZDQz"
                color="#ACAFB6"
                tipPosition="top"
                interactiveMode="touch"
                v-model="result"
                :record="showResult"
                :record-start="recordStart"
                :record-stop="recordStop"
                :record-blank="recordNoResult"
                :record-failed="recordFailed"
                :record-ready="recordReady"
                :record-complete="recordComplete"
              >
                <template v-slot:no-speak>没听清您说的什么</template>
              </voice-input-button>
              <!-- <el-icon class="el-input__icon" :size="20"><search /></el-icon> -->
            </div>
          </template>
          <template #append>
            <el-button class="phoneCode" @click="generate()">提问</el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-row class="third" style="width: auto">
      <el-col :span="16" :offset="4">
        <div v-if="inSearch" class="txt">
          <el-skeleton style="width: 100%" animated :loading="loading">
            <template #template>
              <div style="padding: 10px 0 0 0px">
                <el-skeleton-item variant="p" style="width: 100%" />
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-items: space-between;
                    margin-bottom: 8px;
                  "
                >
                  <el-skeleton-item variant="text" style="margin-right: 16px" />
                  <el-skeleton-item variant="text" style="width: 30%" />
                </div>
                <el-skeleton-item
                  variant="p"
                  style="width: 100%"
                /><el-skeleton-item variant="p" style="width: 100%" />
              </div>
            </template>
          </el-skeleton>
          <span>{{ ans }}</span>
          <span
            v-if="!loading"
            style="padding-left: 9px; cursor: grab"
            title="关闭问答"
            @click="cancel()"
            ><el-icon><CircleClose style="width: 5em; height: 1em" /></el-icon
          ></span>
        </div>
        <div v-else style="margin-top: 3px">
          <div class="txt2" style="color: antiquewhite; margin-top: 30px">
            您想要的，在这里都能搜到！
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script name="ChatView">
import {
  getCurrentInstance,
  defineComponent,
  ref,
  toRefs,
  reactive,
  onMounted,
} from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import voiceInputButton from "voice-input-button2";
import { Vue2InVue3 } from "@efox/emp-vuett";
import loading from "@/components/loading.vue";
const ContentInVue3 = Vue2InVue3(voiceInputButton, "voice");

export default {
  name: "App",

  components: {
    "voice-input-button": ContentInVue3,
    loading: loading,
  },

  data() {
    return {
      info: "",
      loading: false,
      ans: "",
      inSearch: false,
      api: "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",
      result: "",
    };
  },

  methods: {
    generate() {
      //   const { proxy } = getCurrentInstance();
      //   console.log(proxy);
      console.log("generate");
      if (this.info == "") {
        ElMessage({
          message: "请输入您的问题",
          type: "warning",
          offset: 80,
        });
        return;
      }
      var first = document.querySelector(".first");
      first.style.transform = "translate(0, -80px)";
      first.style.transition = "all  1.25s  ease-in";
      var second = document.querySelector(".second");
      second.style.transform = "translate(0, -80px)";
      second.style.transition = "all  1.25s  ease-in";
      var third = document.querySelector(".third");
      third.style.transform = "translate(0, -60px)";
      third.style.transition = "all  1.25s  ease-in";
      this.ans = "";
      this.loading = true;
      this.inSearch = true;
      this.$axios({
        url: "https://api.openai.com/v1/completions",
        method: "post",
        data: {
          prompt: this.info,
          max_tokens: 4000,
          model: "text-davinci-003",
          temperature: 0.7,
          top_p: 1,
          frequency_penalty: 0,
          presence_penalty: 0,
        },
        headers: {
          "content-type": "application/json",
          Authorization: "Bearer " + this.api,
        },
      })
        .then((res) => {
          console.log(res);
          let tmpans = res.data.choices[0].text;
          if (
            tmpans[0] == "？" ||
            tmpans[0] == "。" ||
            tmpans[0] == "！" ||
            tmpans[0] == "，"
          ) {
            tmpans = tmpans.substring(1, tmpans.length);
          }
          // 去除文本前后空格换行
          tmpans = tmpans.trim();
          console.log(tmpans);
          this.ans = tmpans;
          console.log(this.ans);
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    cancel() {
      this.inSearch = false;
      this.ans = "";
      var first = document.querySelector(".first");
      first.style.transform = "";
      first.style.transition = "all  1.25s  ease-in";
      var second = document.querySelector(".second");
      second.style.transform = "";
      second.style.transition = "all  1.25s  ease-in";
      var third = document.querySelector(".third");
      third.style.transform = "";
      third.style.transition = "all  1.25s  ease-in";
    },
    recordReady: function () {
      console.info("按钮就绪!");
    },
    recordStart: function () {
      console.info("录音开始");
    },
    showResult: function (text) {
      console.info("收到识别结果：", text);
    },
    recordStop: function () {
      console.info("录音结束");
    },
    recordNoResult: function () {
      console.info("没有录到什么，请重试");
    },
    recordComplete: function (text) {
      console.info("识别完成! 最终结果：", text);
      this.info = text;
    },

    recordFailed: function (error) {
      console.info("识别失败，错误栈：", error);
    },
    handleInputFocus() {
      let appendEle = document.getElementsByClassName(
        "el-input-group__append"
      )[0];
      var apele = appendEle;
      apele.style.borderColor = "#4568ee";
    },
    handleInputBlur() {
      let appendEle = document.getElementsByClassName(
        "el-input-group__append"
      )[0];
      var apele = appendEle;
      apele.style.borderColor = "#DCDFE6";
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-input {
  color: #a6adba;
  --el-input-border-color: #2a303c;
  --el-input-bg-color: #2a303c;
  height: 50px;
  --el-input-focus-border-color: #404955;
}

/deep/ .el-input__inner {
  color: #a6adba;
  font-weight: 400;
  font-size: 1.1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}

/deep/.el-input-group__append {
  background-color: #191d24;
  box-shadow: none;
  font-weight: 400;
  font-size: 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    Liberation Mono, Courier New, monospace;
}
.logo {
  width: 25vh;
  height: 15vh;
  margin: 0 auto;
  z-index: 1;
}
@keyframes scale-up {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.home {
  background: linear-gradient(rgba(14, 14, 14, 0.7), rgba(0, 0, 0, 0.7)),
    url(../assets/bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.95;
  height: 100%;
  min-height: 100%;
  overflow: auto;
}
/deep/.el-skeleton.is-animated .el-skeleton__item {
  background: linear-gradient(90deg, #5e6570 25%, #a6adba 37%, #a6adba 63%);
  background-size: 400% 100%;
  animation: el-skeleton-loading 1.4s ease infinite;
}
.txt {
  background-color: #363b46;
  height: auto;
  max-height: 70vh;
  border-radius: 10px;
  padding: 1% 5%;
  overflow: hidden;
  line-height: 4vh;
  text-align: justify;
  white-space: pre-wrap;
  animation-name: scale-up;
  color: #a6adba;
  font-weight: 400;
  font-size: 1.1rem;
}
.txt:hover {
  overflow-y: auto;
}
.txt {
  /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 3px;
  }
  // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-track {
    // background-color: rgb(42, 44, 48 / 46%);
    background: transparent;
    border-radius: 10px;
  }
  // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
  &::-webkit-scrollbar-thumb {
    background: #81878f;
    cursor: pointer;
    border-radius: 10px;
  }
}
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
// 滚动条整体部分
::-webkit-scrollbar {
  width: 8px;
  height: 3px;
}
// 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-button {
  display: none;
}
::-webkit-scrollbar-track {
  background-color: rgb(42, 44, 48 / 46%);
  border-radius: 10px;
}
// 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-thumb {
  background: #81878f;
  cursor: pointer;
  border-radius: 10px;
}
</style>
